$(() => {
    $.ajax({
        type: "post",
        url: "../server/goodsnum.php",
        dataType: "json",
        success: function (response) {
            let num = JSON.stringify(response).slice(14)
            $(".gmain-top-num").text(num.slice(0, -3))
        }
    });

    new Promise(function (resolve, reject) {
        $.ajax({
            type: "post",
            url: "../server/goodshead.php",
            dataType: "json",
            success: (data) => {
                renderUI1(data)
                resolve();
            }
        });
    }).then(function () {

    })
    // 渲染gmain-centerp2

    function renderUI1(data) {
        let html = data.map((ele, index) => {
            let listhtml = ele.word.map((item, index) => {
                return `<li>${item}</li>`
            }).join("")
            return `<ul class = "gcenter-class2-list">${listhtml}</ul>`
        }).join("")
        $(".gmain-center-class2").html(html)
    }



    function getDataWithPage(page, type) {
        $.ajax({
            type: "get",
            url: "../server/getGoodsData.php",
            data: `page=${page}&sortType=${type}`,
            dataType: "json",
            success: (data) => {
                renderUI2(data)
                for (let i = 0; i < $(".discountstr").length; i++) {
                    if ($(".discountstr").eq(i).text() == "")
                        $(".discountstr").eq(i).css("display", "none")

                    if($(".saels").eq(i).text()=="")
                    $(".saels").eq(i).css("display", "none")
                }
                
                $(".goods-list>ul>li").hover(function () {
                    let index = $(this).index()
                    $(".slid").eq(index).addClass("sliddown")
                    // $(this).addClass("boxsha")
                    $(this).css("z-index","999")
                    $(this).children(".goods-list-box").css("border","1px solid red")
                }, function () {
                    let index = $(this).index()
                    $(".slid").eq(index).removeClass("sliddown")
                    // $(this).removeClass("boxsha")
                    $(this).css("z-index","0")
                    $(this).children(".goods-list-box").css("border","1px solid rgba(255, 0, 0, 0)")
                })
                backTop()
                goodsclick()
            }

        });
    }

    function backTop(){
        $(window).scroll(()=>{
            let offtop = $(".backtop").offset()
            if(offtop.top <= 210){
                $(".backtop").css({"position":"absolute","top":"150px"})
            }else{
                $(".backtop").css({"position":"fixed","top":"50px"})
            }
            $(".backtop").click(function(){
                $(window).get(scrollTo(0,0))
            })
        })
        
    }
    //商品列表
    new Promise(function (resolve, reject) {
        $.ajax({
            type: "get",
            url: "../server/getPageCount.php",
            dataType: "json",
            success: (data) => {
                let res = "";
                for (let i = 0; i < data.count; i++) {
                    res += `<a href="javascript:;">${i + 1}</a>`
                }
                $("#page").html(res);
                $("#page").children().eq(0).addClass("active");

                resolve();
            }
        });
    }).then(function () {
        getDataWithPage(1, 0);
    })


    /* type ==0 默认排序  id */
    /* type ==1 升序排列  价格 */
    /* type ==2 降序排列  价格 */



    function renderUI2(data) {
        let html = data.map((ele) => {
            return ` <li>
                <div class="goods-list-box">
                    <img src="${ele.photo}" alt="">
                    <div class="goods-list-price">
                        <span>${ele.price}</span>
                        <span class = "discountstr">${ele.discountstr == null?"":ele.discountstr}</span>
                        <del>${ele.marketprice == null ?"":ele.marketprice}</del>
                    </div>
                    <div class="goods-list-detil">
                        <span class = "slid">${ele.title}</span>
                    </div>
                    <div class="goods-list-type">
                        <span class = "saels">${ele.saelsinfo}</span>
                        <span>${ele.saelsinfo1 == null? "":ele.saelsinfo1}</span>
                        <span>${ele.saelsinfo2 == null?"":ele.saelsinfo2}</span>
                    </div>
                    <div class="goods-list-place">
                        <i></i>
                        <span>${ele.comments}</span>
                        <span>${ele.proPlace}</span>
                    </div>
                    <span>${ele.selfflag == null?ele.selfflag:"考拉海购"}</span>
                </div>
            </li>`
        }).join("")
        $(".goods-list>ul").html(html)
    }


    /* 先给页面添加点击事件，当点击的时候获取页码值，根据该值发送网络请求 */
    $("#page").on("click", "a", function () {
        console.log("-----")
        getDataWithPage($(this).text());
        $(this).addClass("active").siblings().removeClass("active");
    })

    /* 处理排序 */
    $(".typeBtn").click(function () {
        console.log("++++")
        console.log($(this).index())
        getDataWithPage(1, $(this).index());
    })

    function goodsclick(){
        $(".goods-list>ul").children().on("click",function(){
            let index = $(this).index()+1
            $.ajax({
                type: "post",
                url: "../server/transdetil.php",
                data:{
                    name:`${index}`,
                } ,
                dataType: "json",
                success: function (response) {
                    console.log(response)
                    window.location.href = "./goodsdetil.html"+"?"+`id=${index}`
                }
            });
        })
    }


})